import { useEffect, useRef, useState } from "react";
import { Navigator, View } from "@tarojs/components";
import { useReachBottom } from "@tarojs/taro";

import Page from "@/components/common/Page";
import ByIcon from "@/components/ui/ByIcon";
import TabsTag from "@/components/app/TabsTag";
import ByAvatar from "@/components/ui/ByAvatar";
import ListView from "@/components/app/ListView";
import PageHeader from "@/components/common/PageHeader";
import ProjectStatistic from "./components/ProjectStatistic";
import ProjectCard from "./components/ProjectCard";

import ApiCrm from "@/api/crm";
import useAppStore from "@/store";
import useList from "@/hooks/useList";
import BySquare from "@/components/ui/BySquare";
import BySearchBar from "@/components/ui/BySearchBar";

// 意向客户状态,0-意向状态1-设计状态2-施工状态3-售后状态
export const typeList = [
  { label: "全部", value: -1 },
  { label: "资源", value: -2 },
  { label: "意向", value: 1, color: "error" },
  { label: "设计", value: 2, color: "primary" },
  { label: "施工", value: 3, color: "warning" },
  { label: "完工", value: 4, color: "success" },
];

/**
 * CustomerInfo
 */
export interface CustomerItem {
  createDate: string;
  /**
   * 客户姓名
   */
  customerName: string;
  customerNo: string;
  /**
   * 装修完整地址
   */
  decorationFullAddress: string;
  draftCustomerId: number;
  intentCustomerId: number;
  /**
   * 意向客户状态,0-意向状态1-设计状态2-施工状态3-售后状态
   */
  intentCustomerState: number;
  /**
   * 是否意向客户
   */
  isIntentCustomer: number;
  /**
   * 短信手机号
   */
  mobileTelephone: string;
  /**
   * 第三方编码
   */
  thirdPartyCoding: string;
  [property: string]: any;
}

export default function Index() {
  const userInfo = useAppStore((state) => state.userInfo);

  const [tabActive, setTabActive] = useState(-1);

  const [customerName, setCustomerName] = useState<string>();

  const search = useRef<{
    customerName: string;
    isIntentCustomer: number | "";
    intentCustomerState: number | "";
  }>({
    // customerName:"庄丽丽",
    customerName: "",
    isIntentCustomer: 0,
    intentCustomerState: "",
  });

  const { loading, list, nextPage, resetToFirst } = useList<CustomerItem>(
    ApiCrm.customerList,
    { manual: true, showLoading: true }
  );

  useEffect(() => {
    const { current } = search;
    if (tabActive == -1) {
      // 全部
      current.isIntentCustomer = "";
      current.intentCustomerState = "";
    } else if (tabActive == -2) {
      current.isIntentCustomer = 0;
      current.intentCustomerState = "";
    } else {
      current.isIntentCustomer = 1;
      // 资源 ： 客户（意向、设计、施工等）
      current.intentCustomerState = tabActive;
    }

    resetToFirst(current);
  }, [tabActive]);

  useReachBottom(() => nextPage());

  const toSearch = (e = "") => {
    search.current.customerName = e;
    resetToFirst(search.current);
  };

  return (
    <>
      <Page
        slotHeader={
          <View className="bg-page">
            <PageHeader showBack={false}>
              <Navigator hover-class="none" url="/pages/mine/index">
                <ByAvatar
                  src={userInfo?.avatar}
                  alt={userInfo?.user_name}
                  className="bg-primary text-white"
                />
              </Navigator>

              <View className="flex items-center justify-end flex-auto">
                <BySearchBar
                  circle
                  className="bg-white"
                  placeholder="根据客户名称检索"
                  onClear={() => toSearch()}
                  onConfirm={toSearch}
                />

                {/* <ByIcon name="Search" size={40} /> */}

                {/* <View className="relative ml-4">
                  <View className="absolute top-0 right-0  w-[10px] h-[10px] rounded-full bg-[red]" />
                  <ByIcon name="Notice" size={40} />
                </View> */}
              </View>
            </PageHeader>
          </View>
        }
      >
        <ProjectStatistic />

        <View className="sticky mt-4 top-[154px] bg-page px-4 pb-3 z-20">
          <View className="mb-2 font-bold text-lg">我的项目</View>
          <TabsTag
            items={typeList}
            active={tabActive}
            onChange={setTabActive}
          />
        </View>

        <View className="relative px-4 pb-5">
          <ListView skeletonAvatar loading={loading} isEmpty={list.length == 0}>
            {list.map((item) => (
              <ProjectCard source={item} />
            ))}
          </ListView>
        </View>
      </Page>

      <Navigator
        className="fixed bottom-[20px] left-1/2 -translate-x-1/2 z-10"
        url="/packageWork/pages/registration/form"
      >
        <BySquare icon="Plus" size={50} className="bg-primary text-white" />
      </Navigator>
    </>
  );
}
